---
id: 5dc23991f86c76b9248c6eb8
title: Step 6
challengeType: 0
dashedName: step-6
---

# --description--

In the previous step, you put the `h1`, `h2`, comment, and `p` elements inside the `main` element. This is called *nesting*. Nested elements should be placed two spaces further to the right of the element they are nested in. This spacing is called indentation and it is used to make HTML easier to read.

Here is an example of nesting and indentation:

```html
<main>
  <h1>Most important content of the document</h1>
  <p>Some more important content...</p>
</main>
```

The `h1` element, `h2` element and the comment are indented two spaces more than the `main` element in the code below. Use the space bar on your keyboard to add two more spaces in front of the `p` element so that it is indented properly as well.

# --hints--

Your code should have an `h2` element with text `Cat Photos`. You may have accidentally deleted it, it is missing both opening and closing tags, or the text has changed.

```js
assert(
  document.querySelector('h2') &&
    code.match(/<\/h2\>/) &&
    document.querySelector('h2').innerText.toLowerCase() === 'cat photos'
);
```

You should not add the `ul` or `li` elements from the example.

```js
assert(
  !document.querySelector('ul') && !document.querySelector('li')
);
```

You should not change the indentation on the line with your `h2` element. Its opening tag should start 6 spaces over from the start of the line. You can restart the step to restore the original indentation.

```js
assert(code.toLowerCase().match(/<\/h1\>\s*\n\s{6}<h2>/));
```

Your code should have a comment. You removed the comment from an earlier step.

```js
assert(code.match(/<!--.*-->/));
```

The comment's text should be `TODO: Add link to cat photos`. Do not change the text or spacing of the comment.

```js
assert(code.match(/<!--\s*todo:\s+add\s+link\s+to\s+cat\s+photos\.?\s*-->/i));
```

You should not change the indentation on the line with your comment element. Its opening tag should start 6 spaces over from the start of the line. You can restart the step to restore the original indentation.

```js
assert(
  code
    .toLowerCase()
    .match(/<\/h2>\s*\n\s{6}<!--\s*todo:\s+add\s+link\s+to\s+cat\s+photos\s*-->/)
);
```

Your code should have a `p` element. You have removed the `p` element from an earlier step.

```js
assert(document.querySelector('p'));
```

The text of the `p` element should be `See more cat photos in our gallery.` Do not change the text, spacing, or punctuation of the `p` element.

```js
assert(
  document
    .querySelector('p')
    .innerText.toLowerCase()
    .match(/see\s+more\s+cat\s+photos\s+in\s+our\s+gallery\.?$/)
);
```

The opening `p` tag should have indentation that matches your `h2` and comment elements. Its opening tag should start 6 spaces over from the start of the line.

```js
assert(code.toLowerCase().match(/-->\s*\n\s{6}<p>/));
```

# --seed--

## --seed-contents--

```html
<html>
  <body>
    --fcc-editable-region--
    <main>
      <h1>CatPhotoApp</h1>
      <h2>Cat Photos</h2>
      <!-- TODO: Add link to cat photos -->
    <p>See more cat photos in our gallery.</p>
    </main>
--fcc-editable-region--
  </body>
</html>
```

